<template>
  <ul>
    <div v-for="(item, index) in asideList" :key="item.path">
      <li :path="item.path" @click="handleClickLi(item.path, index)">
        <span :class="{ active: asideActive == index }">{{ item.title }}</span>
      </li>
    </div>
  </ul>
</template>

<script lang="ts">
import { defineComponent, PropType, toRefs } from 'vue'
import { IAsideTitle } from '@/typing'

export default defineComponent({
  name: 'AsideList',
  props: {
    asideActive: Number,
    asideList: Array as PropType<IAsideTitle[]>
  },
  emits: ['handleClickLi'],
  setup(props, { emit }) {
    const methods = {
      handleClickLi(path: string, index: number): void {
        emit('handleClickLi', path, index)
      }
    }

    return {
      ...toRefs(props),
      ...methods
    }
  }
})
</script>

<style lang="stylus" scoped>
ul
  padding 2rem 0
  text-align center
  li
    padding 0.5rem
    &:hover
      color #e54d42
    span
      display inline-block
      width 16rem
      padding 1rem 2rem
      font-size 1.8rem
      border-radius 1rem;
      transition all .8s
      &:hover
        border-radius 2.2rem
        box-shadow 0 .2rem .5rem #330033 inset
    .active
      width 20rem
      color #e54d42
      border-radius 2.2rem
      box-shadow 0 .2rem .5rem #330033 inset
</style>
